{% extends "base.html" %}
{% load cctags %}

{% block head_ex %} 
<style type="text/css">
   #copylink.active { background-color:#aaa; }
</style>
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/static/zeroclipboard/ZeroClipboard.js"></script>
<script type="text/javascript">

$(document).ready(function() {
     ZeroClipboard.setMoviePath( '/static/zeroclipboard/ZeroClipboard.swf' );
     var clip = new ZeroClipboard.Client();
     
     clip.addEventListener( 'mouseDown', function(client) { 
            clip.setText( "{{gallery_settings.baseurl}}/showimage/{{photo.id}}/" );
            } );
     clip.glue("copylink");
     
     
		var bind_delete = function()
		{
			$(".deletecoment").click(function() {
			var commentid = $(this).attr('name').replace('delete','');
			$.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=deletecomment",
                    { 'commentid': commentid},
                  	  function(json){ 
	                  		if(json.result == 'ok')
	                  		{
	                  			buildcomments(json.comments);
	                  		}
	                  		else
	                  		{
	                  			alert('{% _ "error" %}: '+json.msg);
	                  		}
						});	
			return false;
			});
		};
		bind_delete();
		
{% if users.is_admin %}
		$("#setcover").click(function() {
			$.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=setcoverphoto",
                    { 'photoid': {{photo.id}},
                      'albumid': {{photo.album.id}}},
                      function(json){ 
                            if(json.result == 'ok')
                            {
                                alert('{% _ "Cover Photo Saved" %}');
                            }
                            else
                            {
                                alert('{% _ "error" %}: '+json.msg);
                            }
                        });     
		});
		 
		$("#desp_admin").click(function() {
			$("#desp_admin").hide();
			$("#despcontent").html(($("#desp_admin").html().replace(/(^\s*)|(\s*$)/g, "")));
			$("#despeditor").show();	    
        }); 
        $("#despcancel").click(function() {
			$("#desp_admin").show();
			$("#despeditor").hide();	    
        });
        $("#despsubmit").click(function() {
        	var old_desp = $("#desp_admin").html().replace(/(^\s*)|(\s*$)/g, "");
			$("#desp_admin").show();
			$("#despeditor").hide();
			$("#desp_admin").html('{% _ "photo description is saving..." %}')
			$.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=savephotodesp",
                    { 'photoid': {{photo.id}},
                      'description': $("#despcontent").val()},
                  	  function(json){ 
	                  		if(json.result == 'ok')
	                  		{
	                  			$("#desp_admin").html(json.description);
	                  		}
	                  		else
	                  		{
	                  			alert('{% _ "error" %}: '+json.msg);
	                  			$("#desp_admin").html(old_desp);
	                  		}
						});	    
        });
{% endif %}  

		var buildcomments  = function(comments) {
			$("#comment_container").html('');
			$.each( comments, function(i,comment){
	        	var comment_div = $('<div id="comment_entry" name="comment'+comment.id+'"></div>');
	                  				
	       		var p = $('<p>'+(i+1)+'. '+comment.author+' {% _ "posted on" %} '+ comment.date + '</p>');
	       		if(comment.admin)
	       		{
	       		  var ins = $('<ins class="deletecoment" name="delete'+comment.id+'"> {% _ "Delete" %}</ins>');
	       		  p.append(ins);
	       		}
				comment_div.append(p);
				var h3 = $('<h3> <p>'+ comment.content +'</p></h3>');
				comment_div.append(h3);
				$("#comment_container").append(comment_div);
			});
			bind_delete();
		};
		     
        $("#addcomment").click(function() {
			$("#addcomment2").show();
		});
        
        $("#submitcomment").click( function() {
        	var comment = $("#comment_content").val().replace(/(^\s*)|(\s*$)/g, "");
        	if(comment.length <=0 )
        	{
        		alert('{% _ "Pls input content" %}!');
        		return false;
        	}
        	if(comment.length > 500 )
        	{
        		alert('{% _ "comment can not over 500 chars" %}!');
        		return false;
        	}
        	var author = $("#comment_author").val().replace(/(^\s*)|(\s*$)/g, "");
        	if(author.length <= 0)
        	{
        		alert('{% _ "Pls input your name" %}');
        		return false;
        	}
        	$.blockUI({message: '<h1>{% _ "comment is saving..." %}</h1>', 
		                css: { border: '1px solid #60a0c0',width:"500px" } 
		           	});	
		    $.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=addcomment",
                    { 'photoid': {{photo.id}},
                      'author': $("#comment_author").val(),
                      'comment_content' :  $("#comment_content").val() },
                  	  function(json){ 
                  	  		$.unblockUI();
	                  		if(json.result == 'ok')
	                  		{
	                  			buildcomments(json.comments);
	                  		}
	                  		else
	                  		{
	                  			alert('{% _ "error" %}: '+json.msg);
	                  		}
						});
			return false;
        });	
}); 
</script>
{% endblock %}

{% block commandbar %}
		<li>|</li>
        <li><a href="/showslider/{{album.name}}/">{% _ "Slide Show" %}</a></li>
        {% if users.is_admin %}
        <li>|</li>
        <li><a href="/admin/delphoto/{{photo.id}}">{% _ "Delete this photo" %}</a></li> 
        <li>|</li>
        <li><a href="#" id="setcover">{% _ "Set as Cover Photo" %}</a></li> 
        {% endif %}
{% endblock %}
   
{% block page %}
<div id="page">
        <!-- start content -->
        <div id="content">
             <div id="photo">
                <a href="/showimage/{{photo.id}}/" target="_blank"><img src="/showimage/{{photo.id}}/"/></a>
                <div id="description">
                	{% if users.is_admin %}
                		<div id="desp_admin">
                	    {% if photo.description %}
                	    	{{photo.description}}
                	    {% else %}
                	    	{% _ "add description" %}
                	    {% endif %}
                	    </div>
                	    <div id="despeditor" style="display: none;">
							<textarea id="despcontent" rows="2">{{photo.description}}</textarea>
							<div>
							<input type="button" value="{% _ 'save' %}" name="{% _ 'save' %}" id="despsubmit"/>
							<input type="button" value="{% _ 'cancel' %}" name="{% _ 'cancel' %}" id="despcancel"/>
							</div>
						</div> 
                	{% else %}
                	{{photo.description|linebreaks}}
                	{% endif %}
				</div>
             </div>
             <div id="slider">
	             <div id="photo_nav">
	             	<div>
	             	 {% if prevphoto %}
		             <a href="/{{album.name}}/{{prevphoto.name}}"><img src="/thumb/{{prevphoto.id}}.png"/></a>
		             {% endif %}
	             	 <img src="/thumb/{{photo.id}}.png" class="selected"/>
	             	 {% if nextphoto %}
		             <a href="/{{album.name}}/{{nextphoto.name}}"><img src="/thumb/{{nextphoto.id}}.png"/></a>
		             {% endif %}
		            </div>
		            <div> 
	             	 {% if prevphoto %}
		             <a href="/{{album.name}}/{{prevphoto.name}}">{% _ 'Prev photo' %}</a> 
		             {% endif %} 
		             {{current}}/{{total}}  
		             {% if nextphoto %}
		             <a href="/{{album.name}}/{{nextphoto.name}}">{% _ 'Next photo' %}</a>
		             {% endif %} 
		            </div> 
	             </div>
	             <div id="information">
		             <table>
		             <tr><td>{% _ 'Filename' %}:</td><td><div id="filename">{{photo.name}}</div></td></tr>
		             <tr><td>{% _ 'Owner' %}:</td><td>{{photo.owner}}</td></tr>
		             <tr><td>{% _ 'Type' %}:</td><td>{{photo.contenttype}}</td></tr>
		             <tr><td>{% _ 'Dimensions' %}:</td><td>{{photo.width}}x{{photo.height}}</td></tr>
		             <tr><td>{% _ 'Size' %}:</td><td>{{photo.size|filesizeformat}}</td></tr>
		             <tr><td>{% _ 'Date updated' %}:</td><td>{{photo.updatedate|date:"Y-m-d H:i"}} GMT</td></tr>
		             <tr><td>{% _ 'Web address' %}:</td><td><input value="{{gallery_settings.baseurl}}/showimage/{{photo.id}}/" type="text" /></td></tr>
                             <tr><td></td><td><input type="button" id="copylink" value="{% _ 'Copy Photo Link' %}"/></td></tr>
		             </table>
	             </div>
             </div>
             <div id="comment">
             <form method="post" id="comment_form">
             <div id="addcomment">{% _ 'click me to post comment(most 500 chars)' %}:</div>
             <div id="addcomment2" style="display:none;">
             <div>{% _ 'name' %}: <input name="comment_author" id="comment_author" value="{{users.get_current_user.nickname}}" type="text" /> 
             <button id="submitcomment">{% _ 'submit' %}</button></div>
             <div><textarea name="comment_content" id="comment_content" rows="4" maxlength="500"></textarea></div>
             </div>
             </form>
             <div id="comment_container">
             {% for comment in photo.Comments %}
             	<div id="comment_entry" name="comment{{comment.id}}">
                	<p>{{forloop.counter}}.  {{comment.author}} {% _ 'posted on' %} {{comment.date|date:"Y-m-d H:i"}} GMT 
                	{% if users.is_admin %} <ins name="delete{{comment.id}}" class="deletecoment"> {% _ 'Delete' %}</ins> {%endif%}</p>
        			<h3> {{comment.content|linebreaks}}</h3>
        		</div>
             {% endfor %}
             </div>
             </div>
         </div>
        <!-- end content -->
    <div style="clear: both;">&nbsp;</div>
</div>
{% endblock %}